﻿@{
    ViewBag.Title = "Chapter";
    Layout = "~/Views/Shared/_BookLayout.cshtml";
}
<style>
    .formTable {
        width: 100%;
    }
</style>

<h2>Chapters :  Selected Name @ViewBag.ChapterName </h2>

<div id="editor">
    <div id="dynamicForm">
    </div>
    @*  <p>You have asked for <span data-bind='text: Chapters().length'>&nbsp;</span> chapter(s)</p>*@
    <form action='/someServerSideHandler'>

        <table data-bind='visible: Chapters().length > 0'>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>ID</th>
                    <th />
                </tr>
            </thead>
            <tbody data-bind='foreach: Chapters'>
                <tr>
                    <td>
                        <input class='required' data-bind='value: Name' /></td>
                    <td>
                        <input class='required number' data-bind='value: ID, uniqueName: true' /></td>
                    <td><a href='#' data-bind='click: $root.removeChapter'>Delete</a></td>
                </tr>
            </tbody>
        </table>

        <button data-bind='click: addChapter'>Add Chapter</button>
        <button data-bind='click: save, enable: Chapters().length > 0' type='submit'>Submit</button>
    </form>
</div>
@section masterscripts
{
     <div class="bookSection">
      @Html.Partial("_BookChapters")
    </div>
}

@section scripts
{
    <script type="text/javascript">
        $("#editor").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) {
                var placeHolder = $(this).find("#dynamicForm");
                var objectType = ui.draggable.attr("viewType");
                if (objectType == "chapter") {
                    $("<p></p>").text(ui.draggable.text() + ui.draggable.tagName).appendTo(placeHolder);
                }
                else {
                    window.self.location.href = "/Book/" + objectType + "/" + ui.draggable.text();
                }
            }
        });
    </script>
}